<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    li{
      list-style: none;
    }

    .app{
      width: 500px;
      background-color: skyblue;
      margin: 0 auto;
    }
    .list{
      width: 300px;
      /* background-color: pink; */
      margin: 0 auto;
    }

    .item{
      text-align: left;
      position: relative;
      margin-bottom: 4px;
      height: 85px;
      z-index: 3;
    }
    .tit{
      /* text-align: center; */
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
    }
    .detail{
      visibility: hidden;
      width: 200px;
      background-color: #fff;
      box-shadow: 0px 2px 4px rgb(88, 88, 88);
      /* margin: 0 auto; */
      margin-top: 10px;
      padding: 20px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="app">
    <ul class="list">
      <!-- <li class="item">
        <p class="tit">华北石家庄RDC</p>
        <p class="detail">华北石家庄RDC，仓库面积为10000平米，日订单处理能力为3万单。</p>
      </li>
      <li class="item">
        <p class="tit">华北石家庄RDC</p>
        <p class="detail">华北石家庄RDC，仓库面积为10000平米，日订单处理能力为3万单</p>
      </li>
      <li class="item">
        <p class="tit">华北石家庄RDC</p>
        <p class="detail">华北石家庄RDC，仓库面积为10000平米，日订单处理能力为3万单</p>
      </li>
      <li class="item">
        <p class="tit">华北石家庄RDC</p>
        <p class="detail">华北石家庄RDC，仓库面积为10000平米，日订单处理能力为3万单</p>
      </li> -->
    </ul>
  </div>

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
    $(function () { 
      let arr=[
        {tit:'华北石家庄RDC',detail:'华北石家庄RDC，仓库面积为10000平米，日订单处理能力为3万单。'},
        {tit:'华东淮安RDC',detail:'华东淮安RDC，仓库面积为1.5万平米，已使用1万平米，日订单处理能力为5万单。'},
        {tit:'华中武汉RDC',detail:'华中武汉RDC，仓库面积为2万平米，已使用1.5万平米，日订单处理能力为6万单。'},
        {tit:'华中杭州（嘉兴）RDC',detail:'华中杭州（嘉兴）RDC，仓库面积为1.5万平米。日均处理单量为5万单。'},
        {tit:'华南花都RDC',detail:'华南花都RDC，仓库面积为1.8万平米，已使用1.3万平米，平日订单处理能力为6万单。'},
        {tit:'华南白云RDC',detail:'华南白云RDC，仓库面积为1.2万平米，已使用7000平米，日订单处理能力为3万单。'},
        {tit:'华南从化RDC',detail:'华南从化RDC,仓库面积8000平米，已经使用4500方。日平均处理能力2万单。'},
      ]

      for (let i = 0; i < arr.length; i++) {
        let li=`
        <li class="item">
          <p class="tit">${arr[i].tit}</p>
          <p class="detail">${arr[i].detail}</p>
        </li>`

        $('.list').append(li)
      }


      $('.list .tit').hover(function () {
        console.log(111);
        $(this).parent().css({
          'z-index':10
        })
        $(this).siblings().css({
          'visibility':'visible',
        })
      },function () {
        $(this).siblings().css({
          'visibility':'hidden',
        })
        $(this).parent().css({
          'z-index':3
        })
      })
    })
  </script>
</body>
</html>